<template>
<!-- 历史搜索开始 -->
  <div class="history-search" v-if="historyList.length">
    <header class="history-header">
      <h3 class="title">历史搜索</h3>
      <i class="iconfont icon-clear" @click="showConfirm"></i>
    </header>
    <div class="history-search-content">
      <div class="history-item"
      v-for="(item,index) of historyList"
      :key="index"
      @click="$_updateStorage(item)">{{item}}</div>
    </div>
  </div>
<!-- 历史搜索结束 -->
</template>
<script>
import storage from '@/assets/js/storage'
import { SEARCH_HISTORY_KEY } from './config'
import { searchMixin } from '@/assets/js/mixin'
export default {
  name: 'historySearch',
  mixins: [searchMixin],
  data () {
    return {
      historyList: []
    }
  },
  created () {
    // 获取历史搜索列表
    this.getHistoryList()
  },
  methods: {
    getHistoryList () { // 获取历史搜索列表
      this.historyList = storage.get(SEARCH_HISTORY_KEY, [])
    },
    showConfirm () { // 触发父组件显示确认框事件
      this.$emit('showConfirm')
    },
    clear () { // 清空历史搜索
      this.historyList = []
      storage.remove(SEARCH_HISTORY_KEY)
    }
  }
}
</script>
<style lang="stylus" scoped>
.history-search
  margin-top 10px
  .history-header
    display flex
    justify-content space-between
    padding 0 10px
    .title
      font-size 20px
      margin-bottom 5px
    .iconfont
      font-size 24px
  .history-search-content
    display flex
    flex-wrap wrap
    .history-item
      height 40px
      line-height 40px
      margin 10px
      background-color #fff
      padding 0 10px
      font-size 20px
</style>
